<template>
<!-- 引入第三方动画 -->
    <div>
        <button @click="isShow = !isShow">显示/隐藏</button>
        
        <transition-group 
            appear 
            name="animate__animated animate__bounce"
            enter-active-class="animate__bounce"
            leave-active-class="animate__backOutUp"
            >
            <h1 :key="1" v-show="!isShow" >{{msg}}</h1>
            <h1 :key="2" v-show="isShow" >{{msgs}}</h1>
        </transition-group>
    </div>
</template>
<script>
import 'animate.css'
export default {
    data() {
        return {
            msg:'杨五皮',
            msgs:'杨六皮',
            isShow:true,
        }
    },

}
</script>
<style >
    h1{
        background-color: aqua;
        
    }






</style>